<!-- 选择定位弹窗 -->
<template>
  <el-dialog
    title="选择定位"
    :visible.sync="dialogVisible"
    width="50%"
    class="mapDialog"
    :before-close="handleDialogClose"
  >
    <Amap :choose="choose" ref="Amap" />
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Amap from "./amap.vue";
export default {
  components: { Amap },
  name: "ChoosePosition",
  props: {
    // 支持父组件传入默认坐标（可选）
    defaultLnglat: {
      type: Array,
      default: () => [114.268691, 30.401227] // 默认武汉坐标
    }
  },
  data() {
    return {
      choose: true,
      dialogVisible: false
    };
  },
  methods: {
    // 父组件调用：显示弹窗并初始化地图
    show() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.Amap.init();
      });
    },
    // 保存选中位置（向父组件传递结果）
    submit() {
      const { lnglat, searchKeyword } = this.$refs.Amap;
      if (!lnglat.length) return;
      // 1. 向父组件发射选中的经纬度（父组件通过@get-lnglat接收）
      this.$emit("getLnglat", {
        lng: lnglat[0],
        lat: lnglat[1],
        address: searchKeyword || "未知位置" // 附带搜索关键词作为地址
      });
      //   2. 关闭弹窗
      this.dialogVisible = false;
    },
    // 弹窗关闭前：清理地图资源（防止内存泄漏）
    handleDialogClose() {
      this.$refs.Amap.handleClose();
      this.dialogVisible = false;
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 0 !important;
}

.mapDialog {
  .dialog-footer {
    padding: 12px 20px;
    text-align: right;
  }
}
</style>